<template lang="">
  <div class="tabBar">
    <TabBarItem v-for="(item,index) in tabBars" :key="index" :className="item.className" :title="item.title"
      :path="item.path" :class="selectIndex == index ? 'light':'normal' " @changeIndex="changeIndex(index)">
    </TabBarItem>
  </div>
</template>

<script>
  //导入tabbaritem模块
  import TabBarItem from "@/components/TabBarItem.vue";
  // import {mapMutations} from "vuex";
  export default {
    name: "TabBar",
    data() {
      return {
      }
    },
    props: ['tabBars'],
    methods: {
      changeIndex(index) {
        //通知vuex完成导航标题的更改
        this.$store.commit('changeTitle', this.tabBars[index].title);
        this.$store.commit('changeTabIndex', index);
        // this.changeTitle(this.tabBars[index].title);
        // this.changeTabIndex(index);
      },
      // ...mapMutations('nav',['changeTitle']),
      // ...mapMutations({
      //   changeTabIndex:'tab/changeTabIndex',
      // }),
    },
    components: {
      TabBarItem,
    },
    computed: {
      selectIndex() {
        return this.$store.state.tab.tabIndex;
      }
    },
    created() {
      if (this.$router.history.current.name == "Swiper") {
        this.$store.commit('changeTabIndex', 0);
      }
      if (this.$router.history.current.name == "About") {
        this.$store.commit('changeTabIndex', 1);
      }
      if (this.$router.history.current.name == "Menu") {
        this.$store.commit('changeTabIndex', 2);
      }
      if (this.$router.history.current.name == "Mine") {
        this.$store.commit('changeTabIndex', 3);
      }
    },
  }
</script>

<style scoped lang="less">
  .tabBar {
    width: 375px;
    height: 48px;
    /*no*/
    background-color: #f4f4f4;
    position: fixed;
    left: 0;
    bottom: 0;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
  }
</style>